<template>
  <div class="digital-human-subtitle">
    <div v-if="subtitles.length > 0" class="subtitle-container">
      <div 
        v-for="(subtitle, index) in visibleSubtitles" 
        :key="subtitle.timestamp || index"
        class="subtitle-item"
        :class="{ 
          'user-subtitle': subtitle.source === 'user',
          'agent-subtitle': subtitle.source === 'agent'
        }"
      >
        <div class="subtitle-content">
          <span class="subtitle-text">{{ subtitle.text }}</span>
          <span class="subtitle-time">{{ formatTime(subtitle.timestamp) }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

// Props
interface Subtitle {
  text: string
  timestamp: number
  source: 'user' | 'agent'
}

interface Props {
  subtitles: Subtitle[]
}

const props = defineProps<Props>()

// 计算属性 - 显示最近的3条字幕
const visibleSubtitles = computed(() => {
  return props.subtitles.slice(-3)
})

// 格式化时间
const formatTime = (timestamp: number): string => {
  const date = new Date(timestamp)
  return date.toLocaleTimeString('zh-CN', { 
    hour12: false,
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}
</script>

<style scoped>
.digital-human-subtitle {
  width: 100%;
}

.subtitle-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.subtitle-item {
  animation: slideIn 0.3s ease-out;
}

.subtitle-content {
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  padding: 0.75rem 1rem;
  border-radius: 1rem;
  color: white;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.user-subtitle .subtitle-content {
  background: rgba(33, 150, 243, 0.8);
  margin-left: auto;
  max-width: 80%;
}

.agent-subtitle .subtitle-content {
  background: rgba(76, 175, 80, 0.8);
  margin-right: auto;
  max-width: 80%;
}

.subtitle-text {
  font-size: 0.875rem;
  line-height: 1.4;
  word-break: break-word;
}

.subtitle-time {
  font-size: 0.75rem;
  opacity: 0.7;
  align-self: flex-end;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .subtitle-content {
    padding: 0.5rem 0.75rem;
  }
  
  .subtitle-text {
    font-size: 0.8rem;
  }
  
  .subtitle-time {
    font-size: 0.7rem;
  }
}
</style>
